<template>
	<div class="user-vip-page" v-loading="loading">
		<!-- 头部横幅 -->
		<div class="hero-section">
			<div class="hero-content">
				<div class="hero-text">
					<h1 class="hero-title">
						<CrownOutlined class="crown-icon" />
						{{ isVipUser ? 'AI开发助手 VIP' : '升级 AI开发助手 VIP' }}
					</h1>
					<p class="hero-subtitle">
						{{
							isVipUser ? '尊享AI代码生成特权，加速您的开发效率' : '解锁AI智能代码生成全部功能，打造个人专属开发助手'
						}}
					</p>
					<div class="hero-buttons">
						<a-button
							v-if="!isVipUser"
							type="primary"
							size="large"
							class="upgrade-btn"
							@click="showRedeemModal"
							:loading="upgradeLoading"
						>
							<GiftOutlined />
							立即升级VIP
						</a-button>
						<a-button
							v-else-if="vipStatus.isExpired || shouldShowExpiryWarning"
							type="primary"
							size="large"
							class="renew-btn"
							@click="showRedeemModal"
							:loading="upgradeLoading"
						>
							<ThunderboltOutlined />
							续费VIP
						</a-button>
						<a-button v-else size="large" class="manage-btn" @click="showRedeemModal">
							<SettingOutlined />
							VIP管理
						</a-button>
						<a-button size="large" class="learn-more-btn" @click="scrollToFeatures"> 了解特权 </a-button>
					</div>
				</div>
				<div class="hero-image">
					<div class="vip-card" :class="{ 'vip-active': isVipUser && !vipStatus.isExpired }">
						<div class="vip-card-header">
							<CrownOutlined class="card-crown" />
							<span class="card-title">AI开发助手</span>
							<div class="card-badge" v-if="isVipUser && !vipStatus.isExpired">
								<CheckCircleOutlined />
							</div>
						</div>
						<div class="vip-card-body">
							<div class="member-info">
								<a-avatar size="large" :src="currentVipInfo.userAvatar || undefined" class="vip-user-avatar">
									{{ currentVipInfo.userName?.[0]?.toUpperCase() || 'U' }}
								</a-avatar>
								<div class="member-name">{{ currentVipInfo.userName || '开发者' }}</div>
								<div class="member-status" :class="{ 'vip-active': isVipUser && !vipStatus.isExpired }">
									{{ vipStatus.text }}
								</div>
								<div v-if="isVipUser && !vipStatus.isExpired" class="member-level"><StarOutlined /> VIP开发者</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- VIP状态卡片 -->
		<div v-if="isVipUser" class="vip-status-section">
			<div class="container">
				<div class="status-cards">
					<div class="status-card main-card">
						<div class="card-header">
							<CrownOutlined class="status-icon" />
							<div class="status-text">
								<h3>{{ currentVipInfo.userRole === ACCESS_ENUM.ADMIN ? '管理员特权' : 'AI开发助手 VIP已激活' }}</h3>
								<p>{{ currentVipInfo.userRole === ACCESS_ENUM.ADMIN ? '拥有全部AI代码生成权限' : '正在享受AI智能开发特权' }}</p>
							</div>
						</div>
						<div class="card-content">
							<div class="expire-info" v-if="vipExpireTime">
								<div class="expire-label">VIP到期时间</div>
								<div class="expire-date" :class="`status-${vipStatus.className}`">
									{{ formatExpireDate }}
								</div>
								<div class="expire-status">{{ vipStatus.text }}</div>
								<div class="expire-countdown" v-if="!vipStatus.isExpired">
									<ClockCircleOutlined />
									剩余 {{ remainingDays }} 天AI特权
								</div>
							</div>
							<div class="expire-info permanent" v-else-if="currentVipInfo.userRole === ACCESS_ENUM.ADMIN">
								<div class="expire-label">权限期限</div>
								<div class="expire-date status-permanent">永久有效</div>
								<div class="expire-status">管理员权限</div>
								<div class="expire-countdown"><StarOutlined /> 无限制AI生成</div>
							</div>
						</div>
					</div>

					<div class="status-card benefits-card">
						<div class="card-header">
							<GiftOutlined class="benefits-icon" />
							<div class="benefits-text">
								<h4>AI开发特权</h4>
								<p>已为您开启的VIP功能</p>
							</div>
						</div>
						<div class="benefits-list">
							<div class="benefit-item" v-for="benefit in activeBenefits" :key="benefit.id">
								<CheckCircleOutlined class="benefit-check" />
								<span>{{ benefit.name }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- VIP到期提醒区域 -->
		<div v-if="shouldShowExpiryWarning" class="expiry-warning-banner">
			<div class="container">
				<div class="warning-content">
					<div class="warning-icon">
						<ExclamationCircleOutlined />
					</div>
					<div class="warning-text">
						<h3>{{ expiryWarningTitle }}</h3>
						<p>{{ expiryWarningMessage }}</p>
					</div>
					<div class="warning-actions">
						<a-button type="primary" @click="showRedeemModal" size="large">
							<ThunderboltOutlined />
							立即续费
						</a-button>
						<a-button @click="dismissExpiryWarning" size="large"> 稍后提醒 </a-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 数据统计卡片 -->
		<div class="stats-section">
			<div class="container">
				<div class="stats-grid">
					<div class="stat-card">
						<div class="stat-icon">
							<DatabaseOutlined />
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ isVipUser ? '20个/天' : '5个/天' }}</div>
							<div class="stat-label">AI应用生成</div>
						</div>
					</div>
					<div class="stat-card">
						<div class="stat-icon">
							<CloudUploadOutlined />
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ isVipUser ? '64K Token' : '32k Token' }}</div>
							<div class="stat-label">单次对话容量</div>
						</div>
					</div>
					<div class="stat-card">
						<div class="stat-icon">
							<ThunderboltOutlined />
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ isVipUser ? '200条记忆' : '100条记忆' }}</div>
							<div class="stat-label">上下文记忆</div>
						</div>
					</div>
					<div class="stat-card">
						<div class="stat-icon">
							<CustomerServiceOutlined />
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ isVipUser ? 'ZIP包下载' : '5次/天' }}</div>
							<div class="stat-label">源码下载</div>
						</div>
					</div>
					<div class="stat-card">
						<div class="stat-icon">
							<PictureOutlined />
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ isVipUser ? 'Markdown导出' : '5次/天' }}</div>
							<div class="stat-label">对话历史导出</div>
						</div>
					</div>
					<div class="stat-card">
						<div class="stat-icon">
							<SafetyOutlined />
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ isVipUser ? '私有保护' : '公开可见' }}</div>
							<div class="stat-label">代码私有保护</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 特权功能展示 -->
		<div class="features-section" ref="featuresRef">
			<div class="container">
				<div class="section-header">
					<h2 class="section-title">
						<CrownOutlined class="title-crown" />
						AI开发助手 VIP特权
					</h2>
					<p class="section-subtitle">解锁AI智能代码生成全部功能，提升开发效率</p>
				</div>

				<!-- VIP核心特权亮点 - 炫酷展示 -->
				<div class="vip-showcase" v-if="!isVipUser">
					<div class="showcase-bg">
						<div class="floating-particles"></div>
						<div class="glow-effects"></div>
					</div>

					<div class="showcase-content">
						<div class="upgrade-cta">
							<div class="upgrade-icon">
								<CrownOutlined />
							</div>
							<h3 class="upgrade-title">升级VIP，解锁全部AI特权</h3>
							<p class="upgrade-subtitle">体验5倍AI性能提升，专业开发者的选择</p>
							<a-button
								type="primary"
								size="large"
								class="upgrade-btn-large"
								@click="showRedeemModal"
								:loading="upgradeLoading"
							>
								<GiftOutlined />
								立即升级VIP
							</a-button>
						</div>

						<div class="privilege-showcase">
							<div class="privilege-item" v-for="(item, index) in vipPrivileges" :key="index">
								<div class="privilege-icon" :style="{ animationDelay: `${index * 0.2}s` }">
									<component :is="item.icon" />
								</div>
								<div class="privilege-info">
									<h4>{{ item.title }}</h4>
									<p>{{ item.description }}</p>
									<div class="privilege-upgrade">
										<span class="before">{{ item.before }}</span>
										<ArrowRightOutlined class="arrow" />
										<span class="after">{{ item.after }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- VIP用户展示 -->
				<div class="vip-active-showcase" v-else>
					<div class="active-header">
						<div class="vip-badge">
							<CrownOutlined />
							<span>VIP特权已激活</span>
						</div>
						<h3>尊享AI开发全部特权</h3>
					</div>

					<div class="active-features">
						<div class="active-item" v-for="(item, index) in vipPrivileges" :key="index">
							<div class="active-icon">
								<component :is="item.icon" />
								<CheckCircleOutlined class="check-mark" />
							</div>
							<div class="active-content">
								<h4>{{ item.title }}</h4>
								<div class="active-value">{{ item.after }}</div>
							</div>
						</div>
					</div>
				</div>

				<div class="features-grid">
					<div
						class="feature-card"
						v-for="feature in features"
						:key="feature.id"
						:class="{ 'feature-unlocked': isVipUser }"
					>
						<div class="feature-icon">
							<component :is="feature.icon" />
						</div>
						<h3 class="feature-title">{{ feature.title }}</h3>
						<p class="feature-description">{{ feature.description }}</p>
						<div class="feature-status" v-if="isVipUser">
							<CheckCircleOutlined style="color: #52c41a" />
							<span>已解锁</span>
						</div>
						<div class="feature-status locked" v-else>
							<LockOutlined style="color: #999" />
							<span>升级解锁</span>
						</div>
						<div class="feature-highlight" v-if="feature.highlight">
							<FireOutlined />
							<span>{{ feature.highlight }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 价格与套餐 -->
		<div class="pricing-section" v-if="!isVipUser">
			<div class="container">
				<h2 class="section-title">选择您的AI开发助手套餐</h2>
				<p class="section-subtitle">解锁AI智能代码生成，打造专属开发体验</p>
				<div class="pricing-grid">
					<div class="pricing-card recommended">
						<div class="pricing-badge">推荐</div>
						<div class="pricing-header">
							<h3>AI开发助手VIP</h3>
							<div class="pricing-period">使用兑换码升级</div>
						</div>
						<div class="pricing-features">
							<div class="pricing-feature" v-for="feature in pricingFeatures" :key="feature">
								<CheckOutlined />
								<span>{{ feature }}</span>
							</div>
						</div>
						<div class="pricing-action">
							<a-button type="primary" size="large" @click="showRedeemModal" block>
								<GiftOutlined />
								使用兑换码升级VIP
							</a-button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 对比表格 -->
		<div class="comparison-section">
			<div class="container">
				<h2 class="section-title">功能对比</h2>
				<div class="comparison-table">
					<a-table :dataSource="comparisonData" :columns="comparisonColumns" :pagination="false" bordered>
						<template #bodyCell="{ column, record }">
							<template v-if="column.key === 'feature'">
								<span class="feature-name">{{ record.feature }}</span>
							</template>
							<template v-else-if="column.key === 'free'">
								<span v-if="record.free === true" class="status-yes">
									<CheckOutlined />
								</span>
								<span v-else-if="record.free === false" class="status-no">
									<CloseOutlined />
								</span>
								<span v-else class="status-limited">{{ record.free }}</span>
							</template>
							<template v-else-if="column.key === ACCESS_ENUM.VIP">
								<span class="status-yes">
									<CheckOutlined />
									{{ record.vip }}
								</span>
							</template>
						</template>
					</a-table>
				</div>
			</div>
		</div>

		<!-- 升级按钮 -->
		<div class="upgrade-section" v-if="!isVipUser">
			<div class="container">
				<div class="upgrade-card">
					<h3>立即升级AI开发助手VIP</h3>
					<p>使用兑换码即可享受AI智能代码生成全部特权</p>
					<a-button
						type="primary"
						size="large"
						@click="showRedeemModal"
						class="final-upgrade-btn"
						:loading="upgradeLoading"
					>
						<GiftOutlined />
						立即兑换升级
					</a-button>
				</div>
			</div>
		</div>

		<!-- VIP信息/兑换码模态框 -->
		<VipInfoModal v-model:open="redeemModalVisible" @success="handleRedeemSuccess" />
	</div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
	CrownOutlined,
	GiftOutlined,
	CloudUploadOutlined,
	PictureOutlined,
	DatabaseOutlined,
	CustomerServiceOutlined,
	ThunderboltOutlined,
	SafetyOutlined,
	CheckOutlined,
	CloseOutlined,
	CheckCircleOutlined,
	ExclamationCircleOutlined,
	StarOutlined,
	SettingOutlined,
	ClockCircleOutlined,
	LockOutlined,
	FireOutlined,
	ArrowRightOutlined,
} from '@ant-design/icons-vue'
import VipInfoModal from '@/components/modal/VipInfoModal.vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { getCurrentUserWithVipInfo } from '@/api/vipRedeemCodeController'
import { getGlobalVipReminder } from '@/composables/useVipExpiryReminder'
import dayjs from 'dayjs'
import ACCESS_ENUM from '@/access/accessEnum'

const loginUserStore = useLoginUserStore()

const redeemModalVisible = ref(false)
const featuresRef = ref()
const upgradeLoading = ref(false)
const loading = ref(false)

// 当前用户VIP信息
const currentVipInfo = ref<API.LoginUserVO>({})

// 获取当前用户VIP信息
const fetchCurrentUserVipInfo = async () => {
	loading.value = true
	try {
		const res = await getCurrentUserWithVipInfo()
		if (res.data?.code === 0 && res.data.data) {
			currentVipInfo.value = res.data.data
			// 同时更新loginUserStore的数据，保持一致性
			loginUserStore.setLoginUser(res.data.data)
		} else {
			message.error('获取VIP信息失败')
		}
	} catch (error) {
		console.error('获取VIP信息失败:', error)
		message.error('网络错误，请稍后重试')
	} finally {
		loading.value = false
	}
}

// 页面挂载时获取VIP信息
onMounted(async () => {
	// 首先获取最新的VIP信息
	await fetchCurrentUserVipInfo()

	// 延迟检查VIP到期状态，确保页面加载完成
	setTimeout(() => {
		getGlobalVipReminder().checkVipExpiry()
	}, 1000)
})

// 判断是否为VIP用户（考虑过期情况）
const isVipUser = computed(() => {
	const userRole = currentVipInfo.value?.userRole

	// 管理员永久有效
	if (userRole === ACCESS_ENUM.ADMIN) {
		return true
	}

	// 非VIP用户
	if (userRole !== ACCESS_ENUM.VIP) {
		return false
	}

	// VIP用户需要检查是否过期
	const expireTime = currentVipInfo.value?.vipExpireTime
	if (!expireTime) {
		// 没有过期时间，考虑为永久VIP
		return true
	}

	// 检查是否过期
	const now = dayjs()
	const expire = dayjs(expireTime)

	// 如果已过期，返回false
	return expire.isAfter(now)
})

// VIP过期时间
const vipExpireTime = computed(() => {
	return currentVipInfo.value?.vipExpireTime
})

// 剩余天数
const remainingDays = computed(() => {
	if (!vipExpireTime.value) return 0
	const now = dayjs()
	const expire = dayjs(vipExpireTime.value)
	return Math.max(0, expire.diff(now, 'day'))
})

// VIP状态计算（是否已过期）
const vipStatus = computed(() => {
	const userRole = currentVipInfo.value?.userRole

	// 管理员永久有效
	if (userRole === ACCESS_ENUM.ADMIN) {
		return { isExpired: false, text: '永久有效', className: 'permanent' }
	}

	// 非VIP用户
	if (userRole !== ACCESS_ENUM.VIP) {
		return { isExpired: true, text: '未开通', className: 'not-vip' }
	}

	// VIP用户检查过期时间
	const expireTime = vipExpireTime.value
	if (!expireTime) {
		return { isExpired: true, text: '已过期', className: 'expired' }
	}

	const now = dayjs()
	const expire = dayjs(expireTime)
	const diffDays = expire.diff(now, 'day')

	if (diffDays < 0) {
		return { isExpired: true, text: '已过期', className: 'expired' }
	} else if (diffDays === 0) {
		return { isExpired: false, text: '今日到期', className: 'expiring' }
	} else if (diffDays <= 7) {
		return { isExpired: false, text: `${diffDays}天后到期`, className: 'warning' }
	} else {
		return { isExpired: false, text: `${diffDays}天后到期`, className: 'active' }
	}
})

// 已激活的权益列表
const activeBenefits = computed(() => [
	{ id: 1, name: '无限制AI应用生成' },
	{ id: 2, name: '无限制AI对话次数' },
	{ id: 3, name: '源码下载导出' },
	{ id: 4, name: '对话历史导出' },
	{ id: 5, name: '100条上下文记忆' },
	{ id: 6, name: '64K Token支持' },
])

// 是否显示到期警告
const shouldShowExpiryWarning = computed(() => {
	const userRole = currentVipInfo.value?.userRole

	// 管理员不显示警告
	if (userRole === ACCESS_ENUM.ADMIN) {
		return false
	}

	// 非VIP用户不显示警告
	if (!isVipUser.value) {
		return false
	}

	const expireTime = vipExpireTime.value
	if (!expireTime) {
		return false
	}

	const now = dayjs()
	const expire = dayjs(expireTime)
	const diffDays = expire.diff(now, 'day')

	// 剩余7天内或已过期3天内显示警告
	return diffDays <= 7 && diffDays >= -3
})

// 到期警告标题
const expiryWarningTitle = computed(() => {
	const expireTime = vipExpireTime.value
	if (!expireTime) return ''

	const now = dayjs()
	const expire = dayjs(expireTime)
	const diffDays = expire.diff(now, 'day')

	if (diffDays < 0) {
		return `VIP会员已过期 ${Math.abs(diffDays)} 天`
	} else if (diffDays === 0) {
		return 'VIP会员今日到期'
	} else {
		return `VIP会员将在 ${diffDays} 天后到期`
	}
})

// 到期警告消息
const expiryWarningMessage = computed(() => {
	const expireTime = vipExpireTime.value
	if (!expireTime) return ''

	const now = dayjs()
	const expire = dayjs(expireTime)
	const diffDays = expire.diff(now, 'day')

	if (diffDays < 0) {
		return '您的VIP特权已暂停使用，请及时续费以恢复所有VIP功能。'
	} else if (diffDays === 0) {
		return '为了不影响您的使用体验，请及时续费延长VIP服务。'
	} else if (diffDays <= 3) {
		return '为了不影响您的使用体验，建议您提前续费延长VIP服务。'
	} else {
		return '您的VIP即将到期，建议您提前准备续费。'
	}
})

// 格式化过期时间显示
const formatExpireDate = computed(() => {
	if (!vipExpireTime.value) return ''
	return dayjs(vipExpireTime.value).format('YYYY.MM.DD')
})

// VIP特权升级对比数据
const vipPrivileges = [
	{
		icon: DatabaseOutlined,
		title: 'AI应用生成',
		description: '每日AI应用生成数量限制',
		before: '5个/天',
		after: '20个/天',
	},
	{
		icon: CloudUploadOutlined,
		title: '单次对话容量',
		description: '处理更大型项目的代码生成需求',
		before: '32k Token',
		after: '64K Token',
	},
	{
		icon: ThunderboltOutlined,
		title: '上下文记忆',
		description: 'AI记忆能力大幅提升，对话更连贯',
		before: '100条记忆',
		after: '200条记忆',
	},
	{
		icon: CustomerServiceOutlined,
		title: '源码下载功能',
		description: '项目源码完整下载导出',
		before: '5次/天',
		after: '支持ZIP包下载',
	},
	{
		icon: PictureOutlined,
		title: '对话历史导出',
		description: 'AI对话记录保存和分享',
		before: '5次/天',
		after: '支持Markdown格式导出',
	},
	{
		icon: SafetyOutlined,
		title: '代码私有保护',
		description: '生成的代码享受私有保护',
		before: '公开可见',
		after: '私有保护',
	},
]

// VIP特权功能
const features = [
	{
		id: 1,
		icon: DatabaseOutlined,
		title: 'AI应用生成提升',
		description: '每日AI应用生成从5个提升至20个，满足更多开发需求',
		highlight: '核心特权',
	},
	{
		id: 2,
		icon: PictureOutlined,
		title: 'ZIP包源码下载',
		description: '支持导出完整项目源码ZIP包，包含所有文件和依赖配置',
		highlight: '独享功能',
	},
	{
		id: 3,
		icon: CustomerServiceOutlined,
		title: 'Markdown对话导出',
		description: '支持导出AI对话记录为Markdown文件，便于保存和分享',
		highlight: '数据管理',
	},
	{
		id: 4,
		icon: CustomerServiceOutlined,
		title: '64k Token支持',
		description: '单次对话支持64k Token容量，处理更复杂的代码需求',
		highlight: '技术优势',
	},
	{
		id: 5,
		icon: ThunderboltOutlined,
		title: '100条上下文记忆',
		description: '对话记忆增强至100条，AI理解更准确，代码生成更连贯',
		highlight: '智能升级',
	},
	{
		id: 6,
		icon: SafetyOutlined,
		title: '代码私有保护',
		description: '生成的代码享受私有保护，确保您的创意和代码安全',
	},
]

// 定价功能列表
const pricingFeatures = [
	'20个/天AI应用生成',
	'64k Token超大容量',
	'100条上下文记忆',
	'ZIP包源码下载',
	'Markdown对话导出',
	'代码私有保护',
	'优先技术支持',
	'新功能优先体验',
]

// 功能对比数据
const comparisonData = [
	{ key: '1', feature: '每日AI应用生成', free: '5个', vip: '20个' },
	{ key: '2', feature: '单次对话Token容量', free: '32k Token', vip: '64k Token' },
	{ key: '3', feature: '上下文记忆数量', free: '30条', vip: '100条' },
	{ key: '4', feature: '源码下载导出', free: '5次/天', vip: '支持ZIP包下载' },
	{ key: '5', feature: '对话历史导出', free: '5次/天', vip: '支持Markdown格式导出' },
	{ key: '6', feature: '代码私有保护', free: false, vip: '✓' },
	{ key: '7', feature: '技术支持', free: '社区支持', vip: '优先支持' },
	{ key: '8', feature: '新功能体验', free: '延后开放', vip: '优先体验' },
]

const comparisonColumns = [
	{
		title: '功能',
		dataIndex: 'feature',
		key: 'feature',
		width: '40%',
	},
	{
		title: '免费用户',
		dataIndex: 'free',
		key: 'free',
		width: '30%',
		align: 'center' as const,
	},
	{
		title: 'VIP用户',
		dataIndex: ACCESS_ENUM.VIP,
		key: ACCESS_ENUM.VIP,
		width: '30%',
		align: 'center' as const,
	},
]

// 显示VIP信息/兑换模态框
const showRedeemModal = () => {
	// 无论是否为VIP用户，都显示模态框（VIP用户看信息，普通用户兑换）
	redeemModalVisible.value = true
}

// 滚动到功能介绍
const scrollToFeatures = () => {
	featuresRef.value?.scrollIntoView({ behavior: 'smooth' })
}

// 关闭到期警告
const dismissExpiryWarning = () => {
	// 可以在这里添加逻辑，比如设置不再提醒的时间
	message.info('稍后会再次提醒您')
}

// 兑换成功处理
const handleRedeemSuccess = async () => {
	try {
		// 刷新VIP信息
		await fetchCurrentUserVipInfo()
		message.success('VIP权限已生效，页面信息已更新')
	} catch (error) {
		console.error('刷新VIP信息失败:', error)
		message.warning('兑换成功，但刷新VIP信息失败，请手动刷新页面')
	}
}
</script>

<style scoped lang="scss">
.user-vip-page {
	min-height: 100vh;
	background: #f5f7fa;

	.hero-section {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 80px 0;
		color: white;

		.hero-content {
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			gap: 60px;
			padding: 0 24px;

			.hero-text {
				flex: 1;

				.hero-title {
					font-size: 48px;
					font-weight: 700;
					margin-bottom: 20px;
					display: flex;
					align-items: center;
					gap: 16px;

					.crown-icon {
						color: #ffd700;
						font-size: 52px;
					}
				}

				.hero-subtitle {
					font-size: 20px;
					margin-bottom: 40px;
					opacity: 0.9;
					line-height: 1.6;
				}

				.hero-buttons {
					display: flex;
					gap: 16px;

					.upgrade-btn,
					.renew-btn {
						background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
						border: none;
						height: 50px;
						padding: 0 32px;
						font-size: 16px;
						font-weight: 600;

						&:hover:not(:disabled) {
							transform: translateY(-2px);
							box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
						}
					}

					.manage-btn {
						background: rgba(255, 255, 255, 0.15);
						border: 2px solid rgba(255, 255, 255, 0.3);
						color: white;
						height: 50px;
						padding: 0 32px;
						font-size: 16px;

						&:hover {
							background: rgba(255, 255, 255, 0.25);
							border-color: rgba(255, 255, 255, 0.5);
							color: white;
						}
					}

					.learn-more-btn {
						height: 50px;
						padding: 0 32px;
						font-size: 16px;
						background: rgba(255, 255, 255, 0.1);
						border: 2px solid rgba(255, 255, 255, 0.3);
						color: white;

						&:hover {
							background: rgba(255, 255, 255, 0.2);
							border-color: rgba(255, 255, 255, 0.5);
							color: white;
						}
					}
				}
			}

			.hero-image {
				flex: 0 0 300px;

				.vip-card {
					background: rgba(255, 255, 255, 0.1);
					backdrop-filter: blur(10px);
					border-radius: 20px;
					padding: 30px;
					border: 1px solid rgba(255, 255, 255, 0.2);
					transition: all 0.3s ease;

					&.vip-active {
						background: rgba(255, 215, 0, 0.2);
						border-color: rgba(255, 215, 0, 0.3);
						box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
					}

					.vip-card-header {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 12px;
						margin-bottom: 24px;
						position: relative;

						.card-crown {
							color: #ffd700;
							font-size: 24px;
						}

						.card-title {
							font-size: 20px;
							font-weight: 600;
						}

						.card-badge {
							position: absolute;
							right: -10px;
							top: -10px;
							background: #52c41a;
							border-radius: 50%;
							width: 24px;
							height: 24px;
							display: flex;
							align-items: center;
							justify-content: center;
							color: white;
							font-size: 12px;
						}
					}

					.vip-card-body {
						text-align: center;

						.member-info {
							.member-name {
								margin-top: 12px;
								font-size: 16px;
								font-weight: 500;
							}

							.member-status {
								margin-top: 8px;
								padding: 4px 12px;
								border-radius: 12px;
								font-size: 14px;
								background: rgba(255, 255, 255, 0.1);

								&.vip-active {
									background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
									color: white;
									font-weight: 600;
								}
							}

							.member-level {
								margin-top: 8px;
								font-size: 12px;
								color: #ffd700;
								display: flex;
								align-items: center;
								justify-content: center;
								gap: 4px;
							}
						}
					}
				}
			}
		}
	}

	.vip-status-section {
		padding: 40px 0;
		background: white;

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.status-cards {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 24px;

			.status-card {
				background: white;
				border-radius: 16px;
				padding: 30px;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
				border: 1px solid #f0f0f0;

				&.main-card {
					background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
					color: white;

					.card-header {
						display: flex;
						align-items: center;
						gap: 16px;
						margin-bottom: 20px;

						.status-icon {
							font-size: 32px;
							color: #ffd700;
						}

						.status-text {
							h3 {
								margin: 0 0 4px 0;
								font-size: 20px;
								font-weight: 600;
							}

							p {
								margin: 0;
								opacity: 0.9;
							}
						}
					}

					.card-content {
						.expire-info {
							text-align: center;
							background: rgba(255, 255, 255, 0.15);
							backdrop-filter: blur(10px);
							border-radius: 12px;
							padding: 20px;
							border: 1px solid rgba(255, 255, 255, 0.2);

							&.permanent {
								background: rgba(255, 255, 255, 0.2);
							}

							.expire-label {
								font-size: 12px;
								opacity: 0.8;
								margin-bottom: 8px;
							}

							.expire-date {
								font-size: 24px;
								font-weight: 700;
								margin-bottom: 8px;

								&.status-active {
									color: #ffffff;
								}

								&.status-warning {
									color: #ffe58f;
								}

								&.status-expiring {
									color: #ffccc7;
								}

								&.status-expired {
									color: #ff7875;
								}

								&.status-permanent {
									color: #ffffff;
								}
							}

							.expire-status {
								font-size: 14px;
								opacity: 0.9;
								margin-bottom: 8px;
							}

							.expire-countdown {
								font-size: 12px;
								opacity: 0.8;
								display: flex;
								align-items: center;
								justify-content: center;
								gap: 4px;
							}
						}
					}
				}

				&.benefits-card {
					.card-header {
						display: flex;
						align-items: center;
						gap: 12px;
						margin-bottom: 20px;

						.benefits-icon {
							font-size: 24px;
							color: #ffd700;
						}

						.benefits-text {
							h4 {
								margin: 0 0 4px 0;
								font-size: 16px;
								font-weight: 600;
								color: #2d3748;
							}

							p {
								margin: 0;
								font-size: 14px;
								color: #666;
							}
						}
					}

					.benefits-list {
						.benefit-item {
							display: flex;
							align-items: center;
							gap: 8px;
							margin-bottom: 12px;
							font-size: 14px;

							.benefit-check {
								color: #52c41a;
								font-size: 16px;
							}

							&:last-child {
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
	}

	.stats-section {
		padding: 40px 0;
		background: #f8fafc;

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 18px;
			justify-items: center;

			@media (max-width: 1400px) {
				grid-template-columns: repeat(3, 1fr);
				gap: 16px;
			}

			@media (max-width: 768px) {
				grid-template-columns: repeat(2, 1fr);
				gap: 16px;
			}

			@media (max-width: 480px) {
				grid-template-columns: 1fr;
				gap: 16px;
			}

			.stat-card {
				background: white;
				border-radius: 16px;
				padding: 20px 16px;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				gap: 14px;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;
				width: 100%;
				max-width: 190px;
				min-height: 135px;

				&:hover {
					transform: translateY(-4px);
					box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
				}

				.stat-icon {
					width: 56px;
					height: 56px;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					border-radius: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					font-size: 24px;
					box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
				}

				.stat-content {
					.stat-number {
						font-size: 18px;
						font-weight: 700;
						color: #2d3748;
						margin-bottom: 6px;
						line-height: 1.2;
					}

					.stat-label {
						font-size: 13px;
						color: #64748b;
						font-weight: 500;
						line-height: 1.3;
					}
				}
			}
		}
	}

	.expiry-warning-banner {
		background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
		padding: 16px 0;
		margin-bottom: 20px;

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.warning-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;

			.warning-icon {
				font-size: 32px;
				color: #fff;
				margin-right: 16px;
			}

			.warning-text {
				flex: 1;
				margin-right: 20px;

				h3 {
					margin: 0 0 4px 0;
					font-size: 18px;
					font-weight: 600;
				}

				p {
					margin: 0;
					opacity: 0.9;
					font-size: 14px;
				}
			}

			.warning-actions {
				display: flex;
				gap: 12px;

				.ant-btn {
					background: rgba(255, 255, 255, 0.2);
					border: 1px solid rgba(255, 255, 255, 0.3);
					color: white;
					backdrop-filter: blur(10px);

					&:hover {
						background: rgba(255, 255, 255, 0.3);
						border-color: rgba(255, 255, 255, 0.4);
						color: white;
						transform: translateY(-1px);
					}

					.anticon {
						margin-right: 6px;
					}
				}
			}
		}

		@media (max-width: 768px) {
			.warning-content {
				flex-direction: column;
				gap: 12px;
				text-align: center;

				.warning-text {
					margin-right: 0;
				}
			}
		}
	}

	.features-section {
		padding: 80px 0;
		background: linear-gradient(135deg, #0f1419 0%, #1a202c 50%, #2d3748 100%);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-opacity="0.03" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
			pointer-events: none;
		}

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px;
			position: relative;
			z-index: 2;
		}

		.section-header {
			text-align: center;
			margin-bottom: 60px;

			.section-title {
				font-size: 42px;
				font-weight: 700;
				margin-bottom: 16px;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 16px;

				.title-crown {
					color: #ffd700;
					font-size: 48px;
					animation: crownGlow 2s ease-in-out infinite alternate;
				}
			}

			.section-subtitle {
				font-size: 18px;
				color: rgba(255, 255, 255, 0.8);
				max-width: 600px;
				margin: 0 auto;
			}
		}

		// VIP升级展示区域
		.vip-showcase {
			position: relative;
			margin-bottom: 60px;
			border-radius: 24px;
			overflow: hidden;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ffd700 100%);
			padding: 3px;

			.showcase-bg {
				position: absolute;
				inset: 3px;
				background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 100%);
				border-radius: 21px;
				overflow: hidden;

				.floating-particles {
					position: absolute;
					inset: 0;
					background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="20" cy="30" r="2" fill="%23ffd700" opacity="0.6"><animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/></circle><circle cx="80" cy="60" r="1.5" fill="%23667eea" opacity="0.4"><animate attributeName="opacity" values="0.4;0.8;0.4" dur="3s" repeatCount="indefinite"/></circle><circle cx="150" cy="40" r="2.5" fill="%23764ba2" opacity="0.5"><animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="40" cy="120" r="1" fill="%23ffd700" opacity="0.7"><animate attributeName="opacity" values="0.7;1;0.7" dur="1.8s" repeatCount="indefinite"/></circle><circle cx="170" cy="130" r="2" fill="%23667eea" opacity="0.6"><animate attributeName="opacity" values="0.6;1;0.6" dur="2.2s" repeatCount="indefinite"/></circle><circle cx="120" cy="170" r="1.5" fill="%23764ba2" opacity="0.4"><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.8s" repeatCount="indefinite"/></circle></svg>')
						repeat;
					animation: particleFloat 20s linear infinite;
				}

				.glow-effects {
					position: absolute;
					inset: 0;
					background: radial-gradient(circle at 30% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
						radial-gradient(circle at 70% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
						radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
					animation: glowPulse 4s ease-in-out infinite alternate;
				}
			}

			.showcase-content {
				position: relative;
				z-index: 3;
				padding: 60px 40px;
				display: grid;
				grid-template-columns: 1fr 1.5fr;
				gap: 60px;
				align-items: center;

				.upgrade-cta {
					text-align: center;

					.upgrade-icon {
						width: 100px;
						height: 100px;
						background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 auto 24px;
						color: #1a1f2e;
						font-size: 48px;
						box-shadow: 0 20px 40px rgba(255, 215, 0, 0.3);
						animation: iconBounce 3s ease-in-out infinite;
					}

					.upgrade-title {
						font-size: 32px;
						font-weight: 700;
						color: white;
						margin-bottom: 16px;
						background: linear-gradient(135deg, #ffd700 0%, #667eea 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
					}

					.upgrade-subtitle {
						font-size: 18px;
						color: rgba(255, 255, 255, 0.8);
						margin-bottom: 32px;
						line-height: 1.6;
					}

					.upgrade-btn-large {
						background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
						border: none;
						height: 60px;
						padding: 0 40px;
						font-size: 18px;
						font-weight: 600;
						border-radius: 30px;
						box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
						transition: all 0.3s ease;

						&:hover:not(:disabled) {
							transform: translateY(-3px);
							box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
							background: linear-gradient(135deg, #ffb300 0%, #ffd700 100%);
						}

						.anticon {
							margin-right: 8px;
							font-size: 20px;
						}
					}
				}

				.privilege-showcase {
					.privilege-item {
						display: flex;
						align-items: center;
						gap: 24px;
						margin-bottom: 32px;
						background: rgba(255, 255, 255, 0.05);
						padding: 24px;
						border-radius: 16px;
						border: 1px solid rgba(255, 255, 255, 0.1);
						backdrop-filter: blur(10px);
						transition: all 0.3s ease;

						&:hover {
							background: rgba(255, 255, 255, 0.08);
							border-color: rgba(255, 215, 0, 0.3);
							transform: translateX(8px);
						}

						.privilege-icon {
							width: 64px;
							height: 64px;
							background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
							border-radius: 16px;
							display: flex;
							align-items: center;
							justify-content: center;
							color: white;
							font-size: 24px;
							flex-shrink: 0;
							animation: privilegeFloat 3s ease-in-out infinite;

							.anticon {
								filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
							}
						}

						.privilege-info {
							flex: 1;

							h4 {
								font-size: 20px;
								font-weight: 600;
								color: white;
								margin-bottom: 8px;
							}

							p {
								font-size: 14px;
								color: rgba(255, 255, 255, 0.7);
								margin-bottom: 12px;
								line-height: 1.4;
							}

							.privilege-upgrade {
								display: flex;
								align-items: center;
								gap: 12px;
								font-weight: 600;

								.before {
									color: #ff6b6b;
									font-size: 14px;
								}

								.arrow {
									color: #ffd700;
									font-size: 16px;
									animation: arrowPulse 2s ease-in-out infinite;
								}

								.after {
									color: #51cf66;
									font-size: 16px;
									background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									background-clip: text;
								}
							}
						}
					}
				}
			}
		}

		// VIP已激活展示
		.vip-active-showcase {
			background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(56, 158, 13, 0.1) 100%);
			border: 2px solid rgba(82, 196, 26, 0.3);
			border-radius: 24px;
			padding: 40px;
			margin-bottom: 60px;

			.active-header {
				text-align: center;
				margin-bottom: 40px;

				.vip-badge {
					display: inline-flex;
					align-items: center;
					gap: 8px;
					background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
					color: white;
					padding: 12px 24px;
					border-radius: 50px;
					font-weight: 600;
					font-size: 16px;
					margin-bottom: 16px;
					box-shadow: 0 8px 25px rgba(82, 196, 26, 0.3);

					.anticon {
						color: #ffd700;
						font-size: 18px;
					}
				}

				h3 {
					font-size: 28px;
					font-weight: 700;
					color: white;
					margin: 0;
				}
			}

			.active-features {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				gap: 24px;

				.active-item {
					background: rgba(255, 255, 255, 0.05);
					border: 1px solid rgba(82, 196, 26, 0.2);
					border-radius: 16px;
					padding: 24px;
					text-align: center;
					transition: all 0.3s ease;

					&:hover {
						background: rgba(255, 255, 255, 0.08);
						border-color: rgba(82, 196, 26, 0.4);
						transform: translateY(-4px);
					}

					.active-icon {
						position: relative;
						width: 64px;
						height: 64px;
						background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
						border-radius: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: white;
						font-size: 24px;
						margin: 0 auto 16px;

						.check-mark {
							position: absolute;
							top: -8px;
							right: -8px;
							background: #ffd700;
							color: #1a1f2e;
							border-radius: 50%;
							width: 24px;
							height: 24px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 12px;
						}
					}

					.active-content {
						h4 {
							font-size: 18px;
							font-weight: 600;
							color: white;
							margin-bottom: 8px;
						}

						.active-value {
							color: #51cf66;
							font-size: 16px;
							font-weight: 600;
						}
					}
				}
			}
		}

		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			gap: 32px;

			.feature-card {
				background: white;
				padding: 40px 32px;
				border-radius: 16px;
				text-align: center;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				position: relative;
				border: 2px solid transparent;

				&:hover {
					transform: translateY(-8px);
					box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
				}

				&.feature-unlocked {
					border-color: #ff8c00;

					&:hover {
						border-color: #ff7700;
					}
				}

				.feature-icon {
					width: 80px;
					height: 80px;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto 24px;
					color: white;
					font-size: 32px;
				}

				.feature-title {
					font-size: 24px;
					font-weight: 600;
					margin-bottom: 16px;
					color: #2d3748;
				}

				.feature-description {
					color: #666;
					line-height: 1.6;
					font-size: 16px;
					margin-bottom: 16px;
				}

				.feature-status {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8px;
					font-weight: 600;
					font-size: 14px;

					&.locked {
						color: #999;
					}
				}

				.feature-highlight {
					position: absolute;
					top: 16px;
					right: 16px;
					background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
					color: white;
					padding: 4px 8px;
					border-radius: 12px;
					font-size: 12px;
					font-weight: 600;
					display: flex;
					align-items: center;
					gap: 4px;
				}
			}
		}
	}

	.pricing-section {
		padding: 80px 0;
		background: #f8fafc;

		.container {
			max-width: 1000px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.section-title {
			text-align: center;
			font-size: 36px;
			font-weight: 700;
			margin-bottom: 16px;
			color: #2d3748;
		}

		.section-subtitle {
			text-align: center;
			font-size: 18px;
			color: #666;
			margin-bottom: 60px;
		}

		.pricing-grid {
			display: flex;
			justify-content: center;

			.pricing-card {
				background: white;
				border-radius: 20px;
				padding: 40px;
				box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
				position: relative;
				max-width: 400px;
				width: 100%;

				&.recommended {
					border: 3px solid #ffd700;
					transform: scale(1.05);
				}

				.pricing-badge {
					position: absolute;
					top: -12px;
					left: 50%;
					transform: translateX(-50%);
					background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
					color: white;
					padding: 8px 24px;
					border-radius: 20px;
					font-weight: 600;
					font-size: 14px;
				}

				.pricing-header {
					text-align: center;
					margin-bottom: 32px;

					h3 {
						font-size: 28px;
						font-weight: 700;
						color: #2d3748;
						margin-bottom: 8px;
					}

					.pricing-period {
						color: #666;
						font-size: 16px;
					}
				}

				.pricing-features {
					margin-bottom: 32px;

					.pricing-feature {
						display: flex;
						align-items: center;
						gap: 12px;
						margin-bottom: 16px;
						font-size: 16px;
						color: #2d3748;

						.anticon {
							color: #52c41a;
							font-size: 18px;
						}

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				.pricing-action {
					text-align: center;
				}
			}
		}
	}

	.comparison-section {
		padding: 80px 0;
		background: white;

		.container {
			max-width: 1000px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.section-title {
			text-align: center;
			font-size: 36px;
			font-weight: 700;
			margin-bottom: 60px;
			color: #2d3748;
		}

		.comparison-table {
			.feature-name {
				font-weight: 600;
				color: #2d3748;
			}

			.status-yes {
				color: #52c41a;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
			}

			.status-no {
				color: #ff4d4f;
				font-size: 16px;
			}

			.status-limited {
				color: #faad14;
				font-weight: 500;
			}
		}
	}

	.upgrade-section {
		padding: 80px 0;
		background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);

		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.upgrade-card {
			text-align: center;
			color: white;

			h3 {
				font-size: 32px;
				font-weight: 700;
				margin-bottom: 16px;
			}

			p {
				font-size: 18px;
				margin-bottom: 40px;
				opacity: 0.9;
			}

			.final-upgrade-btn {
				background: white;
				color: #ffb300;
				border: none;
				height: 56px;
				padding: 0 40px;
				font-size: 18px;
				font-weight: 600;

				&:hover:not(:disabled) {
					transform: translateY(-2px);
					box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
				}
			}
		}
	}

	:deep(.ant-table) {
		.ant-table-thead > tr > th {
			background: #f8fafc;
			font-weight: 600;
			font-size: 16px;
		}

		.ant-table-tbody > tr > td {
			padding: 16px;
			font-size: 14px;
		}

		.ant-table-tbody > tr:nth-child(even) {
			background: #fafafa;
		}
	}
}

@media (max-width: 768px) {
	.user-vip-page {
		.hero-section .hero-content {
			flex-direction: column;
			text-align: center;
			gap: 40px;

			.hero-image {
				flex: none;
			}

			.hero-text .hero-title {
				font-size: 36px;
			}

			.hero-buttons {
				justify-content: center;
			}
		}

		.vip-status-section .status-cards {
			grid-template-columns: 1fr;
		}

		.features-section {
			.section-header .section-title {
				font-size: 32px;
				flex-direction: column;
				gap: 12px;

				.title-crown {
					font-size: 36px;
				}
			}

			.vip-showcase .showcase-content {
				grid-template-columns: 1fr;
				gap: 40px;
				padding: 40px 24px;

				.upgrade-cta {
					.upgrade-icon {
						width: 80px;
						height: 80px;
						font-size: 36px;
					}

					.upgrade-title {
						font-size: 24px;
					}

					.upgrade-btn-large {
						height: 50px;
						font-size: 16px;
						padding: 0 32px;
					}
				}

				.privilege-showcase .privilege-item {
					flex-direction: column;
					text-align: center;
					gap: 16px;

					.privilege-icon {
						width: 56px;
						height: 56px;
						font-size: 20px;
					}

					.privilege-info {
						h4 {
							font-size: 18px;
						}

						.privilege-upgrade {
							justify-content: center;
						}
					}
				}
			}

			.vip-active-showcase {
				padding: 24px;

				.active-features {
					grid-template-columns: 1fr;
				}
			}

			.features-grid {
				grid-template-columns: 1fr;
			}
		}

		.pricing-section .pricing-card.recommended {
			transform: none;
		}
	}
}

// 动画关键帧
@keyframes crownGlow {
	0% {
		text-shadow: 0 0 5px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3);
	}
	100% {
		text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
	}
}

@keyframes particleFloat {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-20px);
	}
}

@keyframes glowPulse {
	0% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}

@keyframes iconBounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}

@keyframes privilegeFloat {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-6px);
	}
}

@keyframes arrowPulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.7;
		transform: scale(1.1);
	}
}

.vip-user-avatar {
	border: 2px solid #ff8c00 !important;
	box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3) !important;
	transition: all 0.3s ease !important;

	&:hover {
		border-color: #ff7700 !important;
		box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4) !important;
		transform: translateY(-1px) !important;
	}
}
</style>
